<template>
  <el-form ref="ruleFormRef" :model="loginFormData" status-icon :rules="rules" label-width="55px" class="demo-loginFormData">
    <el-form-item label="用户名" prop="username" class="username-form-item">
      <el-input v-model="loginFormData.username" type="input" autocomplete="off" />
    </el-form-item>
    <el-form-item label="密码" prop="password" class="password-form-item">
      <el-input v-model="loginFormData.password" type="password" autocomplete="off"/>
    </el-form-item>
    <el-form-item label="验证码" prop="captcha" class="captcha-form-item">
      <el-input v-model="loginFormData.captcha" @keydown.enter="submitForm(ruleFormRef)" maxlength="5"/>
      <span class="captcha-svg" v-html="captcha" @click="getCaptcha" v-loading="loading"></span>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>  <!--,loginFormData.captcha,loginFormData.username,loginFormData.password-->
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive, ref ,onMounted, onUnmounted} from 'vue'
import {rules,useSubmitForm} from "../../composition/login/validate"
// 引入路由对象
import {useRouter} from "vue-router"
// 引入接口
import * as api from "@/api/users.js"
// 引入store
import {useUser} from "@/store/users"
// 引入loading加载框
import { ElLoading } from 'element-plus'


// 控制loading的属性
const loading = ref(true)
// 使用store
let userStore = useUser()

const ruleFormRef = ref()
// 使用路由对象
let router = useRouter()

// 注入到表单的数据
const loginFormData = reactive({
  username: 'admin',
  password: 'admin',
  captcha: '',
})


// 表单校验成功之后回调的方法
let validateSuccess = ()=>{
  // 登入请求之前一定要进行校验验证码,将验证码同意转换成小写
  verifyCaptcha(loginFormData.captcha.toLowerCase())

  console.log('校验成功')
}

// 表单校验失败之后回调的方法
let validateFailed = ()=>{
    console.log('校验失败')
}


// 使用submitForm
let submitForm = useSubmitForm(validateSuccess,validateFailed)

// 声明一个展示验证码的响应式变量
let captcha = ref()

// 测试获取验证码接口
let getCaptcha = async () => {
  // 打开loading动画
  loading.value = true
  let res = await api.getCaptchaApi()
  if(res.data.state) {
    captcha.value = res.data.img 
    // 关闭loading动画
    loading.value = false
  }
  // console.log(captcha.value)
}


// 校验验证吗
// 1、本地的表单校验通过之后
// 2、通过接口校验码验证,一定要配置本地代理

// 声明loadingInstance，用户存储loading动画实例
let loadingInstance = null

let verifyCaptcha = async captcha => {
  // 发起登录请求的时候就要加载loading加载框
   loadingInstance = ElLoading.service({
      text:"正在登入...",
      background:'rgba(0,0,0,.4)'
    })
  try{
    let res = await api.verifyCaptchaApi(captcha)
    // console.log(res);
  
    // 验证码校验通过，发起登录请求
    login(loginFormData.username,loginFormData.password)

  }catch(e){
    // 验证码校验失败，需要重新刷新一下新的验证码
    loginFormData.captcha = ''
    getCaptcha()
    // 关闭加载动画
    loadingInstance.close()
  }
}


// 用户名密码登录
/**
 * 
 * @param {String} username 用户名
 * @param {String} password 密码
 */
let login = async (username,password) => {
  // 调用请求登录接口
  try{
    // 调用登录接口
    let res = await api.loginApi(username,password)
    // console.log(res);

    // 存储token
    sessionStorage.setItem('myx-token',res.data.token)
    // 存储用户信息
    userStore.$patch({
      userInfo:res.data.userInfo
    })
    
    // 将用户信息进行本地存储
    // sessionStorage.setItem('userInfo',JSON.stringify(res.data.userInfo))

    // 登陆成功需要跳转页面
    router.push("/")
    sessionStorage.setItem('permission',JSON.stringify(res.data.permission.buttons))
   
  }catch(e){
    getCaptcha()
    // 关闭加载动画
    loadingInstance.close()
  }
  
  
}
onUnmounted(()=>{
   loadingInstance && loadingInstance.close()
})

// 首次页面加载调用
onMounted(()=>{
  getCaptcha()
})



</script>


<style lang="less" scoped>
// 定制组件，修改样式的思路
// 1、找到对应组件结构的类名
// 2、重新编写样式，覆盖原来的样式

// 样式修改不成功的因素和解决方案
// 1、类名是否正确
// 2、确认权重够不够 !important
// 3、是否需要使用深度选择器  xxx :deep(选择器) scoped样式，层级嵌套比较深的时候


.username-form-item,.captcha-form-item,.password-form-item{
  :deep(.el-form-item__label){
    color: #fff !important;
  }
  
}
.username-form-item,.password-form-item,.captcha-form-item{
  .el-input{
    width: 250px;
    height: 35px;
    // :deep() .el-input_inner{
    //   color: red;
    // }
  }
}
.el-button{
  width: 250px;
  
}

.captcha-svg{
    background: #fff;
    display: inline-block;
    height: 35px;
    // width: 100px;
    text-align: center;
    cursor: pointer;
    border: 0;
    border-radius: 0 5px 5px 0;
    flex: 1;

    :deep(svg){
      width: 100px;
      height: 35px;
    }
}
.captcha-form-item {
  display: flex;
  width: 305px;

 
  .el-input{
    width: 120px;
    
    
  }
  .el-input :deep(.el-input__wrapper) {
    background-color: #FFFFFF;
    box-shadow: 0 0 0 0;
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
  }
}
.el-form-item{
  :deep(.el-form-item__error){
    color: #fff !important;
  }
}


</style>